<template>
  <div class="address-page">
    <h2>
      <span class="s1" @click="goBack()">
        <van-icon name="arrow-left" />
      </span>
      收货地址
    </h2>
    <ul class="u1">
      <li v-for="address in addresses" :key="address.id" @click.stop="asds(address)">
        <div class="address-info">
          <div class="info-wrapper">
            <div class="recipient">{{ address.recipient }}</div>
            <div class="phoneNumber">
              {{ formatPhoneNumber(address.phoneNumber) }}
            </div>
            <div
              class="bq"
              :style="{
                background: address.label == 1 ? 'red' : 'blue',
              }"
              v-if="address.label != null"
            >
              {{
                address.label == null
                  ? ""
                  : address.label == 1
                  ? "公司"
                  : "家庭"
              }}
            </div>
            <div class="moren" v-if="address.isdefault">
              {{ address.isdefault ? "默认" : "" }}
            </div>
          </div>
          <div class="fullAddress">
            {{ address.fullAddress + (address.adds || "") }}
          </div>
          <div class="address-actions">
            <van-button @click.stop="editAddress(address)" type="info" size="small"
              >修改</van-button
            >
            <van-button
              @click.stop="deleteAddress(address.id)"
              type="danger"
              size="small"
              >删除</van-button
            >
          </div>
        </div>
        <div v-if="address.id === editingAddressId" class="edit-form">
          <van-form>
            <van-field
              v-model="obj.recipient"
              label="收件人"
              placeholder="请输入收件人姓名"
            />
            <van-field
              v-model="obj.phoneNumber"
              label="手机号码"
              placeholder="请输入手机号码"
            />
            <van-field
              v-model="obj.adds"
              label="详细地址"
              placeholder="请输入详细地址"
              class="h1"
            />
            <span @click="obj.isdefault = !obj.isdefault">{{
              !obj.isdefault ? "默认" : "取消默认"
            }}</span>
            <div class="edit-actions">
              <van-button @click="cancelEdit" type="default" size="small"
                >取消</van-button
              >
              <van-button @click="saveEdit" type="primary" size="small"
                >保存</van-button
              >
            </div>
          </van-form>
        </div>
      </li>
    </ul>
    <div class="fixed-bottom">
      <van-button @click="goto" type="primary" class="xin">新建地址</van-button>
    </div>
  </div>
</template>

<script>
import Address from "@/api/address";

export default {
  data() {
    return {
      addresses: [],
      editingAddressId: null,
      editRecipient: "",
      editPhoneNumber: "",
      editFullAddress: "",
      obj: {},
    };
  },
  methods: {
    asds(item){
      this.$store.commit('SET_ADDRESS',item)
      this.$route.query.name? sessionStorage.setItem('bln',true): sessionStorage.setItem('bln',false)
      this.$router.go(-1)
    },
    add(){},
    getlist() {
      Address.getAddressList("123").then((res) => {
        this.addresses = res.data
          .map((e, i) => {
            return {
              ...e,
              id: e.addressId,
              recipient: e.name,
              phoneNumber: e.tel,
              fullAddress: e.province + e.city + e.county,
              adds: e.addressdetail,
              isdefault: e.isdefault,
            };
          })
          .sort((a, b) => b.isdefault - a.isdefault);
      });
      console.log(this.addresses, "ress");
    },
    goto() {
      this.$router.push("/adress");
    },
    goBack() {
      this.$router.back(-1);
    },
    deleteAddress(id) {
      // const index = this.addresses.findIndex((address) => address.id === id);
      // if (index !== -1) {
      //   this.addresses.splice(index, 1);
      // }
      Address.deleteAddressList(id).then((res) => {
        console.log(res, "res");
        this.getlist();
      });
    },
    formatPhoneNumber(phoneNumber) {
      return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    },
    editAddress(address) {
      this.editingAddressId = address.id;
      this.editRecipient = address.recipient;
      this.editPhoneNumber = address.phoneNumber;
      this.editFullAddress = address.fullAddress;
      this.obj = { ...address };
    },
    cancelEdit() {
      this.editingAddressId = null;
      this.resetEditFields();
    },
    saveEdit() {
      const params = {
        addressId: this.obj.id,
        addressdetail: this.obj.adds,
        label: this.obj.label,
        isdefault: this.obj.isdefault ? 1 : 0,
        name: this.obj.recipient,
        tel: this.obj.phoneNumber,
        userid: "123",
      };
      Address.editAddressList(params).then((res) => {
        console.log(res, "res");
        this.getlist();
        this.editingAddressId = null;
        this.resetEditFields();
        this.obj = {};
      });
      // const address = this.addresses.find(
      //   (address) => address.id === this.editingAddressId
      // );
      // if (address) {
      //   address.recipient = this.editRecipient;
      //   address.phoneNumber = this.editPhoneNumber;
      //   address.fullAddress = this.editFullAddress;
      // }
    },
    resetEditFields() {
      this.editRecipient = "";
      this.editPhoneNumber = "";
      this.editFullAddress = "";
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>



<style scoped>
.info-wrapper {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.info-wrapper .bq {
  width: 45px;
  margin: 0 10px;
  background: rgb(220, 20, 20);
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 25px;
}
.info-wrapper .moren {
  width: 50px;
  height: 25px;
  background: rgb(20, 220, 73);
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 25px;
}
.edit-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.address-page {
  padding: 20px;
}

.address-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.address-info .info-wrapper {
  display: flex;
}

.recipient {
  margin-right: 10px;
  font-weight: 800;
  margin-bottom: 5px;
}

.address-actions {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
}

.fullAddress {
  white-space: nowrap; /* 取消换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: pre-wrap;
  word-wrap: break-word;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: #fff;
  text-align: center;
}

.xin {
  border-radius: 20px;
  width: 100%;
}

.s1 {
  position: absolute;
  left: 10px;
}

h2 {
  text-align: center;
  padding-bottom: 30px;
  position: relative;
  background: #fff;
}

.van-popup {
  border-radius: 8px;
  padding: 10px;
  color: #fff;
}

.van-popup .van-form {
  margin: 0;
}

.edit-form {
  width: 100%;
  background-color: #999;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px;
  margin-bottom: 20px;
}

.edit-form .van-form {
  margin: 0;
}

.edit-form .van-field__label {
  color: #333;
}

.edit-form .van-field__placeholder {
  color: #999;
}

.edit-form .edit-actions {
  margin-top: 10px;
  text-align: right;
}

.edit-form .van-button {
  margin-left: 10px;
}

.h1 .van-field__control {
  margin-top: 5px; /* 自定义的间隙值 */
}
.phoneNumber {
  color: #ccc;
}
</style>